window.onload = function() {
    var player = $(".player");
    var eleGame = $(".game");
    var eleScore = $('.score');
    var eleLife = $(".blood");
    var eleOver = $(".over");
    var eleStart = $(".start");
    var startBtn = $(".startBtn");
    var restartBtn = $(".restartBtn");
    var W = document.documentElement.clientWidth;
    var H = document.documentElement.clientHeight;


    var bullets = [];
    var enemys = [];

    var playerInfo = {
        w: player.offsetWidth,
        h: player.offsetHeight
    }

    var game = {
        status: false,
        score: 0,
        life: 10
    }
    startBtn.onclick = function() {
        eleStart.style.display = 'none';
        game.status = true;
        playerMove();
        randomEnemy();
        move(bullets, -10, 10);
        move(enemys, 10, 25);
    }
    var dir = {
        left: false,
        right: false,
        top: false,
        bottom: false
    }

    document.onkeydown = function(e) {
        var code = e.keyCode;
        switch (code) {
            case 37:
                dir.left = true;
                break;
            case 39:
                dir.right = true;
                break;
            case 38:
                dir.top = true;
                break;
            case 40:
                dir.bottom = true;
                break;
        }
    }

    document.onkeyup = function(e) {
        var code = e.keyCode;
        switch (code) {
            case 37:
                dir.left = false;
                break;
            case 39:
                dir.right = false;
                break;
            case 38:
                dir.top = false;
                break;
            case 40:
                dir.bottom = false;
                break;
            case 32:
                if (game.status) {
                    createBullet();
                }
                break;
            case 80:
                game.status = !game.status;
                break;
            case 13:
                location.href = location.href;
                break;
        }
    }

    /*键盘控制玩家移动*/
    function playerMove() {
        setInterval(function() {
            if (game.status) {
                if (dir.left) {
                    player.style.left = player.offsetLeft - 15 + 'px';
                }
                if (dir.right) {
                    player.style.left = player.offsetLeft + 15 + 'px';
                }
                if (dir.top) {
                    player.style.top = player.offsetTop - 15 + 'px';
                }
                if (dir.bottom) {
                    player.style.top = player.offsetTop + 15 + 'px';
                }
                checkWall(player);
            }
        }, 1000 / 60)
    }

    /*创建子弹*/
    function createBullet() {
        var pLeft = player.offsetLeft;
        var pTop = player.offsetTop;
        var bullet = document.createElement('div');
        bullet.className = 'bullet';
        bullet.style.left = (pLeft + playerInfo.w / 2 - 15) + 'px';
        bullet.style.top = (pTop - playerInfo.h) + 'px';
        bullets.push(bullet);
        eleGame.appendChild(bullet);
    }

    function createEnemy() {
        var top = -95;
        var left = random(0, W - 125);
        var enemy = document.createElement('div');
        enemy.className = 'enemy';
        enemy.setAttribute('score', 10);
        enemy.setAttribute('life', -5);
        enemy.style.top = top + 'px';
        enemy.style.left = left + 'px';
        enemys.push(enemy);
        eleGame.appendChild(enemy);
    }


    function randomEnemy() {
        setInterval(function() {
            if (game.status) {
                createEnemy();
            }
        }, 200)
    }

    function move(objArr, gap, time) {
        setInterval(function() {
            if (game.status) {
                objArr.forEach(function(v) {
                    v.style.top = v.offsetTop + gap + 'px';
                    checkWall(v);
                })
            }

        }, time)
    }
    checkCrash();

    function checkCrash() {
        bullets.forEach(function(bullet) {
            enemys.forEach(function(enemy) {
                if (crash(bullet, enemy)) {
                    var score = parseInt(enemy.getAttribute('score'));
                    game.score += score;
                    game.life += 1;
                    if (game.life >= 20) {
                        game.life = 20;
                    }
                    eleLife.innerHTML = game.life;
                    eleLife.style.width = game.life * 10 + 'px';
                    eleScore.innerHTML = game.score;
                    var bIndex = bullets.indexOf(bullet);
                    var eIndex = enemys.indexOf(enemy);
                    bullets.splice(bIndex, 1);
                    enemys.splice(eIndex, 1);
                    eleGame.removeChild(bullet);
                    eleGame.removeChild(enemy);
                }
            })
        })
        enemys.forEach(function(enemy) {
            if (crash(player, enemy)) {
                var score = parseInt(enemy.getAttribute('score'));
                var life = parseInt(enemy.getAttribute('life'));
                game.score += score;
                game.life += life;
                eleScore.innerHTML = game.score;
                eleLife.innerHTML = game.life;
                eleLife.style.width = game.life * 10 + 'px';
                eleGame.classList.add('warring');
                setTimeout(function() {
                    eleGame.classList.remove('warring');
                }, 800);
                var eIndex = enemys.indexOf(enemy);
                enemys.splice(eIndex, 1);
                eleGame.removeChild(enemy);
                if (game.life <= 0) {
                    eleGame.removeChild(player);
                    gameOver();
                }
            }
        })
        requestAnimationFrame(checkCrash);
    }
    autoFn();

    function autoFn() {
        setInterval(function() {
            if (game.status) {
                game.life--;
                if (game.life <= 0) {
                    eleGame.removeChild(player);
                    gameOver();
                }
                eleLife.innerHTML = game.life;
                eleLife.style.width = game.life * 10 + 'px';
            }
        }, 1000)
    }

    function gameOver() {
        eleOver.style.display = 'flex';
        game.status = false;
    }

    restartBtn.onclick = function() {
        location.href = location.href;
    }
    /**
     * 判断元素是否出界
     * @param  {obj} obj [description]
     * @return {none}     [description]
     */
    function checkWall(obj) {
        var name = obj.className;
        if (name === "player") {
            if (obj.offsetLeft < 0) {
                obj.style.left = 0;
            }
            if (obj.offsetLeft > W - playerInfo.w) {
                obj.style.left = W - playerInfo.w + 'px';
            }
            if (obj.offsetTop < 0) {
                obj.style.top = 0
            }
            if (obj.offsetTop > H - playerInfo.h) {
                obj.style.top = H - playerInfo.h + 'px';
            }
        }
        if (name === "bullet") {
            if (obj.offsetTop < -90) {
                var bIndex = bullets.indexOf(obj);
                bullets.splice(bIndex, 1);
                eleGame.removeChild(obj);
            }
        }
        if (name === "enemy") {
            if (obj.offsetTop > H + 95) {
                var eIndex = enemys.indexOf(obj);
                enemys.splice(eIndex, 1);

                eleGame.removeChild(obj);
            }
        }
    }

}